<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <h3>新增用户</h3>
    用户名：<input type="text" id="username">
        <div id="message"></div>
    <br>
    联系电话:<input type="text" id="phone">
    <br>
    <button id="btnSave" type="submit">保存</button>
    <br>
    <h3>用户列表</h3>
    关键词：<input type="text" id="keyword">
    <input type="radio" id="searchByUsername" name="search"> 按用户名搜索
    <input type="radio" id="searchByPhone" name="search"> 按手机号搜索
    <button id="btnQuery">查询</button>
    <br>
    <table>
        <thead>
            <td>id</td>
            <td>用户名</td>
            <td>手机号</td>
            <td>操作</td>
        </thead>
        <tbody id="idTbody">

        </tbody>
    </table>
</body>
</html>
<script>
    // 设置用户名输入框的事件
    $("#username").change(function(){
        // 发送ajax请求，判断输入的用户名是否存在
        $.ajax({
            url:'http://localhost:3000/users?username='+$("#username").val(),
            type:'get', 
            dataType:'json',
            success:function(ret){
                // 根据返回的结果进行提示
                if(ret.length>0){
                    $("#message").html("<font color:red;>用户不可用</font>");
                }else{
                    $("#message").html("<font color:green;>用户可用</font>");
                }
            }
        });    
    });

    $("#btnSave").click(function(){
        //发送ajax请求，进行数据的提交
        var parm =JSON.stringify({
            "username":$("#username").val(),
            "phone":$("#phone").val()
        });
        $.ajax({
            url:'http://localhost:3000/users',
            type:'post', 
            dataType:'json',
            data:parm,
            success:function(ret){
                alert('保存完毕');
            }
        });
    });


    $("#btnQuery").click(function(){
        var keyword = $("#keyword").val();
        if ($("#searchByUsername").is(":checked")) {
            $.ajax({
                url: 'http://localhost:3000/users?username=' + keyword,
                type: 'get',
                dataType: 'json',
                success: function(ret){
                    var strHTML="";
                    $(ret).each(function(index,element){
                        strHTML+="<tr>"
                            +"<td>"+element.id+"</td>"
                            +"<td>"+element.username+"</td>"
                            +"<td>"+element.phone+"</td>"
                            +"<td>"+"修改"+"删除"+"</td>"
                            +"</tr>"
                    });
                    $("#idTbody").html(strHTML);
                }
            });
        }else if($("#searchByPhone").is(":checked")) {
            $.ajax({
                url: 'http://localhost:3000/users?phone=' + keyword,
                type: 'get',
                dataType: 'json',
                success: function(ret){
                    var strHTML="";
                    $(ret).each(function(index,element){
                        strHTML+="<tr>"
                            +"<td>"+element.id+"</td>"
                            +"<td>"+element.username+"</td>"
                            +"<td>"+element.phone+"</td>"
                            +"<td>"+"修改"+"删除"+"</td>"
                            +"</tr>"
                    });
                    $("#idTbody").html(strHTML);
                }
            });
        }
});

</script>